<template>
  <div class="body-false" v-if="ruleName">
    <div class="body-top" v-for="(key, rule) in ruleList" track-by="$index">
      <rule-item v-for="(index, item) in rule.conInf" :rule-item='item' :index="key" @time-rule="timeRule" :txt-date='txtDate'></rule-item>
      <div class="rule-btn">
        <v-button class="pull-right" theme="danger" @click="remove(key)">删除</v-button>
      </div>
    </div>
    <div>
      <v-button theme="primary" @click="addRule">添加规则：{{ruleName}}</v-button>
    </div>
  </div>
</template>

<script>
import RuleItem from './rule-item'
export default {
  components: {RuleItem},
  props: {
    'ruleList': {
      type: Array,
      default: () => []
    },
    txtDate: [String],
    'ruleName': {
      type: String,
      default: ''
    }
  },
  methods: {
    addRule () {
      this.$emit('add-rule')
    },
    remove (index) {
      this.$emit('remove', index)
    },
    timeRule (isError, index) {
      this.$emit('time-rule', isError, index)
    }
  }
}
</script>

<style lang="less" scoped>
.control-label{
	text-align: left!important;
}
.body-false{
	width: 100%;
	height: 100%;
	border: 1px solid #d2d6de;
	border-top: 3px solid #d2d6de;
	box-sizing: border-box;
	padding: 10px;
  border-radius: 3px;
}
.body-top{
	width: 100%;
	/*height: 80px;*/
	border: 1px solid #d2d6de;
	box-sizing: border-box;
	padding: 10px;
	margin-bottom: 10px;
	// .form-control-time {
	// 	width: auto;
	// 	display: inline-block;
	// }
	.rule-btn {
		width: 100%;
		overflow: hidden;
		&:after {
			content: '';
			clear: both;
		}
	}
}
.addRule{
	/*width: 100px;*/
	/*max-width: 50%;*/
	display: inline-block;
	padding: 0 10px;
	text-align: center;
	line-height: 34px;
	color: #fff;
	background: #3c8dbc;
	border-radius: 4px;
	margin-top: 2px;
	font-size: 14px;
}
</style>
